<template>
    <el-container>
        <el-header class='el-header'>
            <div style="font-size:24px;color:#333333;text-align:left;margin-left:50px;margin-top:35px;">
                结构化文件构建知识图谱
            </div>
            <div style="font-size:12px;color:#333333;text-align:left;margin-left:50px;margin-top:4px;">
                用户输入结构化文本 实现自定义知识图谱
            </div>
        </el-header>

        <el-main class="main">
            <div style="display:flex;margin-top:60px;">
                <el-card class="box-card">
                <i class="el-icon-document-copy" style="font-size:80px;color:#555555;margin-top:30px;"></i>
                <div style="font-size:20px;color:#555555;margin-top:10px;">
                    实体+关系文件
                </div>

                <div style="font-size:10px;color:#555555;margin-top:10px;">
                    输入实体文件和关系<br>文件构建知识图谱
                </div>
                <el-button type="info" round style="margin-top:20px;" @click="goTo1">开始</el-button>
                </el-card>

                <el-card class="box-card">
                <i class="el-icon-s-order" style="font-size:80px;color:#555555;margin-top:30px;"></i>
                <div style="font-size:20px;color:#555555;margin-top:10px;">
                    医学疾病文件
                </div>

                <div style="font-size:10px;color:#555555;margin-top:10px;">
                    输入以疾病为实体的<br>文件构建知识图谱
                </div>
                <el-button type="info" round style="margin-top:20px;" @click="dialogVisible = true">开始</el-button>
                </el-card>

                <el-dialog
                title="创建图谱"
                :visible.sync="dialogVisible"
                width="30%">
                <el-form :model="graphinfo" ref="graphinfo" :rules="rules" label-width="80px" style="width:70%;margin:auto;">
                    <el-form-item label="图谱名称" prop="name">
                        <el-input v-model="graphinfo.name"></el-input>
                    </el-form-item>
                </el-form>
                <span class="dialog-footer" style="margin-top:40px;">
                    <el-button style="margin-top:20px;" @click="dialogVisible = false">取 消</el-button>
                    <el-button style="margin-top:20px;" type="primary" @click="createGraph('graphinfo')">保 存</el-button>
                </span>
                </el-dialog>

                <el-card class="box-card">
                <i class="el-icon-more-outline" style="font-size:80px;color:#555555;margin-top:30px;"></i>
                <div style="font-size:20px;color:#555555;margin-top:10px;">
                    更多
                </div>

                <div style="font-size:10px;color:#555555;margin-top:10px;">
                    haiyougengduo<br>houxugengxin
                </div>
                <el-button type="info" round style="margin-top:20px;">开始</el-button>
                </el-card>
            </div>
        </el-main>
    </el-container>
</template>

<script>
import axios from 'axios'
import icon_url from '@/assets/icon-2.png'
export default {
    name:"upload",
    data() {
        return {
            name: "上传文件",
            checkStatus: "",
            activeTab: 'first',
            iconPath:icon_url,
            dialogVisible: false,
            graphinfo: {
                name: "",
            },
            rules: {
                name: [
                    { required: true, message: '请输入图谱名称'}
                ],
            },
        }
    },
    methods: {
        goTo1(){
            this.$router.push({ path:'/upload' })
        },
        goTo2(){
            this.$router.push({ path:'/uploadDisease' })
        },
        createGraph(graphinfo){
            this.$refs[graphinfo].validate((valid) => {
            if (valid) {
                var info = {"name": this.graphinfo.name};
                axios.post("http://localhost:8000/polls/build_graph_name/",JSON.stringify(info),{
                    headers: {
                        'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'
                    }
                }).then(res => {
                    console.log(res);
                    if(res.data == "duplicate name"){
                        this.$message({
                        message: '该名称已被使用，请更换!',
                        type: 'warning'
                    });
                    }else{
                        this.$store.state.current_graph_name = this.graphinfo.name;
                        this.dialogVisible = false;
                        this.goTo2();
                    }
                });
            } else {
                console.log('error submit!!');
            }
            });
        },
    },
}
</script>
<style scoped>
    .el-aside{
        background-color: #2b3a49;
    }

    .main{
        background-color: #f3f3f4;
        margin-top:80px;
    }
    .main-container{
        position:absolute;
        height:100%;
        width:100%;
    }
    .card-box{
        margin-top:100px;
    }
    .tab-title{
        color:#fff;
    }
    .box-card{
        width:300px;
        height:320px;
        margin:auto;
    }

</style>